<template>
  <div>
    <van-nav-bar title="电卡充电记录" left-arrow left-text="返回" @click-left="onClickLeft" />
    <div class="block">
      按月选择：<span @click="popupShow = true">{{formatterMonth}} <van-icon name="arrow-down" size="12"/></span>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="loadData"
    >
      <van-cell
        v-for="item in list"
        :key="item.id"
        :value="'消费：' + item.amount + '元'"
      >
        <ul slot="title">
          <li>电站设备：{{item.equipNo}} - {{item.channelNo}}</li>
          <li>充电模式：{{formatterModel(item.planChargingTime)}}</li>
          <li>结束原因：{{formatterEndType(item.endType)}}</li>
          <li>最高功率：{{item.maxChargingPower}}瓦</li>
<!--          <li>消费电量：{{item.degree}}度</li>-->
          <li>功率曲线：<span style="color: #0099ff" @click="initChargeDetail(item)">查看</span></li>
        </ul>
        <span slot="icon" class="icon" style="padding-right: 10px">
          <img src="../assets/eletrc.svg" alt="" v-if="item.equipType === 1">
          <img src="../assets/car.svg" alt="" v-else>
        </span>
        <span slot="label" class="label">
          {{'开始时间：' + item.createTime}} <br>
          {{'结束时间：' + item.updateTime}}
        </span>
      </van-cell>
    </van-list>
    <van-popup
      v-model="popupShow"
      position="bottom"
    >
      <van-datetime-picker
        v-model="month"
        type="year-month"
        title="选择年月"
        :max-date="maxDate"
        :formatter="formatter"
        @cancel="popupShow = false"
        @confirm="reload"
      />
    </van-popup>

    <van-popup
      v-model="chartShow"
      position="bottom"
    >
      <van-nav-bar title="充电功率曲线"></van-nav-bar>
      <div style="height: 300px">
        <VueEcharts class="charts" :init-options="initOptions" :option="chartOption"></VueEcharts>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Utils from '../utils'
import VueEcharts from 'vue-echarts'
export default {
  name: 'CardRechargeRecord',
  data () {
    return {
      popupShow: false,
      month: new Date(),
      page: 1,
      loading: false,
      finished: false,
      list: [],
      cardNo: '',
      maxDate: new Date(),
      chartOption: {},
      initOptions: {
        renderer: 'canvas'
      },
      chartShow: false
    }
  },
  components: { VueEcharts },
  created () {
    this.cardNo = this.$route.params.id
  },
  computed: {
    formatterMonth () {
      const date = this.month
      return date.getFullYear() + '-' + (date.getMonth() + 1)
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push({ path: '/card', query: { cardNo: this.cardNo } })
    },
    reload () {
      this.list = []
      this.finished = false
      this.page = 1
      this.popupShow = false
    },
    loadData () {
      this.$http.get('/restful/kxChargingRecord/getUPage', {
        params: {
          cardNo: this.cardNo,
          page: this.page,
          limit: 20,
          isUser: false,
          charging: false,
          dates: Utils.DateMonth(this.month)
        }
      }).then(res => {
        if (res.code === 'ok') {
          this.list = this.list.concat(res.data.records)
          this.finished = res.data.current >= res.data.pages
          this.page = res.data.current + 1
          this.loading = false
        }
      })
    },
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },
    formatterEndType (e) {
      switch (e) {
        case 0:
          return '初始状态'
        case 1:
          return '打开通道失败'
        case 2:
          return '主动关闭插座'
        case 3:
          return '达到最大充电时长'
        case 4:
          return '达到计划时长'
        case 5:
          return '空载/插座未插紧'
        case 6:
          return '充满自停'
        case 7:
          return '过载'
        case 8:
          return '设备停止充电'
        case 9:
          return '余额不足'
        case 10:
          return '平台关闭插座'
      }
    },
    formatterModel (e) {
      if (e === 0) {
        return '充满自停'
      } else {
        return '计划充电' + e + '小时'
      }
    },
    /**
     * 获取充电曲线
     */
    initChargeDetail (item) {
      this.$http.get('/getEquipChargeDetailed', {
        params: {
          equipNo: item.equipNo,
          chargingRecordId: item.chargingRecordId
        }
      }).then(res => {
        if (res.code === 'ok') {
          const data = res.data
          const parseValue = (value) => {
            return value < 10 ? '0' + value : value
          }
          const parseTime = (str) => {
            const date = new Date(str)
            return parseValue(date.getHours()) + ':' + parseValue(date.getMinutes())
          }
          const list = data.map(item => {
            return {
              name: parseTime(item[0]),
              value: item[1] * 1
            }
          })
          this.chartShow = true
          this.initCharts(list)
        } else {
          this.$toast('没有充电数据，仅保留7天充电数据')
        }
      })
    },
    initCharts (data) {
      this.chartOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            animation: false,
            label: {
              backgroundColor: '#ccc',
              borderColor: '#aaa',
              borderWidth: 1,
              shadowBlur: 0,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              color: '#222'
            }
          }
        },
        grid: {
          left: 35,
          top: 25,
          bottom: 30,
          right: 20
        },
        xAxis: {
          type: 'category',
          data: data.map(item => item.name),
          boundaryGap: false,
          axisLabel: {
            color: '#aaa',
            interval: (index) => {
              return index === 0 || index === data.length - 1
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#aaa'
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            data: data,
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 2,
            areaStyle: {
              color: '#00f',
              opacity: 0.2
            }
          }
        ]
      }
    }
  }
}
</script>

<style scoped lang='less'>
.label {
  white-space: nowrap;
}
.icon {
  img {
    width: 36px;
  }
}
</style>
